<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">隐患排查台账,风险巡查</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="巡检人员">
                            <el-input placeholder="请输入" class="inputW" v-model="userName"></el-input>
                        </el-form-item>
                        <el-form-item label="风险点">
                            <el-input placeholder="请输入" class="inputW" v-model="riskName"></el-input>
                        </el-form-item>

                        <el-form-item label="风险类型">
                            <el-select class="inputW" v-model="pointType">
                                <el-option
                                        v-for="item in pointData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务状态">
                            <el-select class="inputW" v-model="processflag">
                                <el-option
                                        v-for="item in flagData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否有隐患">
                            <el-select class="inputW" v-model="alarmSituation">
                                <el-option
                                        v-for="item in alarmData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="巡检时间">
                            <el-date-picker
                                    v-model="date"
                                    type="month"
                                    format="yyyy-MM"
                                    value-format="yyyy-MM"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="todays" placeholder="选择日" style="width: 120px;">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="1日" value="1"></el-option>
                                <el-option label="2日" value="2"></el-option>
                                <el-option label="3日" value="3"></el-option>
                                <el-option label="4日" value="4"></el-option>
                                <el-option label="5日" value="5"></el-option>
                                <el-option label="6日" value="6"></el-option>
                                <el-option label="7日" value="7"></el-option>
                                <el-option label="8日" value="8"></el-option>
                                <el-option label="9日" value="9"></el-option>
                                <el-option label="10日" value="10"></el-option>
                                <el-option label="11日" value="11"></el-option>
                                <el-option label="12日" value="12"></el-option>
                                <el-option label="13日" value="13"></el-option>
                                <el-option label="14日" value="14"></el-option>
                                <el-option label="15日" value="15"></el-option>
                                <el-option label="16日" value="16"></el-option>
                                <el-option label="17日" value="17"></el-option>
                                <el-option label="18日" value="18"></el-option>
                                <el-option label="19日" value="19"></el-option>
                                <el-option label="20日" value="20"></el-option>
                                <el-option label="21日" value="21"></el-option>
                                <el-option label="22日" value="22"></el-option>
                                <el-option label="23日" value="23"></el-option>
                                <el-option label="24日" value="24"></el-option>
                                <el-option label="25日" value="25"></el-option>
                                <el-option label="26日" value="26"></el-option>
                                <el-option label="27日" value="27"></el-option>
                                <el-option label="28日" value="28"></el-option>
                                <el-option label="29日" value="29"></el-option>
                                <el-option label="30日" value="30"></el-option>
                                <el-option label="31日" value="31"></el-option>
                            </el-select>
                        </el-form-item>
                        <!--<el-form-item label="巡检时间">-->
                        <!--<el-col :span="11">-->
                        <!--<el-date-picker type="datetime" placeholder="开始时间" v-model="startTime"-->
                        <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                        <!--style="width: 100%;"></el-date-picker>-->
                        <!--</el-col>-->
                        <!--<el-col class="line" :span="2">-</el-col>-->
                        <!--<el-col :span="11">-->
                        <!--<el-date-picker type="datetime" placeholder="结束时间" v-model="endTime"-->
                        <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                        <!--style="width: 100%;"></el-date-picker>-->
                        <!--</el-col>-->
                        <!--</el-form-item>-->

                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="exportData">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <template v-if="tableData">
                    <el-table :data="tableData" style="margin-bottom: 40px" :stripe="true" :border="true" size="mini"
                              style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column prop="riskName" label="风险点名称"></el-table-column>
                        <el-table-column prop="userName" label="巡检人员"></el-table-column>
                        <el-table-column prop="cycle" label="周期" width="50"></el-table-column>
                        <el-table-column prop="cycleType" label="周期类型" width="80">
                            <template slot-scope="scope">
                                <div v-if="scope.row.cycleType == '0'">
                                    分
                                </div>
                                <div v-if="scope.row.cycleType == '1'">
                                    时
                                </div>
                                <div v-if="scope.row.cycleType == '2'">
                                    天
                                </div>
                                <div v-if="scope.row.cycleType == '3'">
                                    周
                                </div>
                                <div v-if="scope.row.cycleType == '4'">
                                    月
                                </div>
                                <div v-if="scope.row.cycleType == '5'">
                                    年
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" label="任务开始时间">
                            <template slot-scope="scope">
                                <el-tag size="medium">{{scope.row.createTime.replace("T"," ")}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="missionTime" label="巡检时间">
                            <template slot-scope="scope">
                                <div v-if="scope.row.missionTime">
                                    <el-tag size="medium">{{scope.row.missionTime.replace("T"," ")}}</el-tag>
                                </div>
                                <div v-else>
                                    <el-tag size="medium">暂无数据</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="processflag" label="状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.processflag == '0'">
                                    <el-tag size="medium" type="warning">未巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '2'">
                                    <el-tag size="medium" type="success">已巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '3'">
                                    <el-tag size="medium" type="warning">超时未巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '4'">
                                    <el-tag size="medium" type="success">超时已巡检</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="现场图片" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.img">

                                    <a :href="scope.row.img" class="swipebox" title="ESC键退出">
                                        <el-popover
                                                placement="right"
                                                width="300"
                                                trigger="hover"
                                                popper-class="popClass">
                                            <img :src="scope.row.img"
                                                 style="max-width:600px;max-height: 380px "/>
                                            <img :src="scope.row.img" slot="reference"
                                                 style="max-width:80px;max-height: 80px "/>
                                        </el-popover>
                                    </a>

                                </template>
                                <template v-if="scope.row.img1">
                                    <a :href="scope.row.img1" class="swipebox" title="ESC键退出">
                                        <el-popover
                                                placement="right"
                                                width="300"
                                                trigger="hover"
                                                popper-class="popClass">
                                            <img :src="scope.row.img1"
                                                 style="max-width:600px;max-height: 380px "/>
                                            <img :src="scope.row.img1" slot="reference"
                                                 style="max-width:80px;max-height: 80px "/>
                                        </el-popover>
                                    </a>
                                </template>
                                <template v-if="scope.row.img2">
                                    <a :href="scope.row.img2" class="swipebox" title="ESC键退出">
                                        <el-popover
                                                placement="right"
                                                width="300"
                                                trigger="hover"
                                                popper-class="popClass">
                                            <img :src="scope.row.img2"
                                                 style="max-width:600px;max-height: 380px "/>
                                            <img :src="scope.row.img2" slot="reference"
                                                 style="max-width:80px;max-height: 80px "/>
                                        </el-popover>
                                    </a>
                                </template>
                                <template v-if="scope.row.img3">
                                    <a :href="scope.row.img3" class="swipebox" title="ESC键退出">
                                        <el-popover
                                                placement="right"
                                                width="300"
                                                trigger="hover"
                                                popper-class="popClass">
                                            <img :src="scope.row.img3"
                                                 style="max-width:600px;max-height: 380px "/>
                                            <img :src="scope.row.img3" slot="reference"
                                                 style="max-width:80px;max-height: 80px "/>
                                        </el-popover>
                                    </a>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否有隐患">
                            <template slot-scope="scope">
                                <div v-if="scope.row.alarmSituation==1">
                                    <el-tag size="medium" type="danger">存在隐患</el-tag>
                                </div>
                                <div v-if="scope.row.alarmSituation==0">
                                    <el-tag size="medium" type="success">无隐患</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="300px" align="center">
                            <template slot-scope="scope">
                                <el-button @click="showDetail(scope.row)" round size="mini"
                                           icon="el-icon-share">详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>

                <el-dialog title="巡检明细" :visible.sync="detailFormVisible" :show-close="false" width="2000px">
                    <template v-if="patrolExecute">
                        <p style="text-align: center">巡查基本信息</p>
                        <h1 align="right">
                            <el-button @click="exportDoc" type="success">导出word</el-button>
                        </h1>
                        <table border="1" cellpadding="10" cellspacing="0" style="width: 100%;margin-top: 20px">
                            <tr>
                                <td style="font-weight: bold">风险点名称:</td>
                                <td>{{patrolExecute.riskName}}</td>
                                <td style="font-weight: bold">巡检人:</td>
                                <td>{{patrolExecute.userName}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">巡检日期:</td>
                                <td>
                                    <div v-if="patrolExecute.missionTime">
                                        <el-tag size="medium">{{patrolExecute.missionTime.replace("T"," ")}}</el-tag>
                                    </div>
                                    <div v-else>
                                        <el-tag size="medium">暂无数据</el-tag>
                                    </div>
                                </td>
                                <td style="font-weight: bold">发现隐患数:</td>
                                <td>{{patrolExecute.patrolSum}}</td>
                            </tr>

                            <tr>
                                <td style="font-weight: bold">现场照片:</td>
                                <td colspan="3">
                                    <template v-if="patrolExecute.img">
                                        <a :href="patrolExecute.img" class="swipebox" title="ESC键退出">
                                            <el-popover
                                                    placement="right"
                                                    width="300"
                                                    trigger="hover"
                                                    popper-class="popClass">
                                                <img :src="patrolExecute.img"
                                                     style="max-width:600px;max-height: 380px "/>
                                                <img :src="patrolExecute.img" slot="reference"
                                                     style="max-width:80px;max-height: 80px "/>
                                            </el-popover>
                                        </a>
                                    </template>
                                    <template v-if="patrolExecute.img1">
                                        <a :href="patrolExecute.img1" class="swipebox" title="ESC键退出">
                                            <el-popover
                                                    placement="right"
                                                    width="300"
                                                    trigger="hover"
                                                    popper-class="popClass">
                                                <img :src="patrolExecute.img1"
                                                     style="max-width:600px;max-height: 380px "/>
                                                <img :src="patrolExecute.img1" slot="reference"
                                                     style="max-width:80px;max-height: 80px "/>
                                            </el-popover>
                                        </a>
                                    </template>
                                    <template v-if="patrolExecute.img2">
                                        <a :href="patrolExecute.img2" class="swipebox" title="ESC键退出">
                                            <el-popover
                                                    placement="right"
                                                    width="300"
                                                    trigger="hover"
                                                    popper-class="popClass">
                                                <img :src="patrolExecute.img2"
                                                     style="max-width:600px;max-height: 380px "/>
                                                <img :src="patrolExecute.img2" slot="reference"
                                                     style="max-width:80px;max-height: 80px "/>
                                            </el-popover>
                                        </a>
                                    </template>
                                    <template v-if="patrolExecute.img3">
                                        <a :href="patrolExecute.img3" class="swipebox" title="ESC键退出">
                                            <el-popover
                                                    placement="right"
                                                    width="300"
                                                    trigger="hover"
                                                    popper-class="popClass">
                                                <img :src="patrolExecute.img3"
                                                     style="max-width:600px;max-height: 380px "/>
                                                <img :src="patrolExecute.img3" slot="reference"
                                                     style="max-width:80px;max-height: 80px "/>
                                            </el-popover>
                                        </a>
                                    </template>

                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">检查情况:</td>
                                <td colspan="3">
                                    {{patrolExecute.missionDetail}}
                                <td>
                            </tr>
                        </table>
                    </template>

                    <template v-if="executeDetails">
                        <table border="1" cellpadding="10" cellspacing="0" style="width: 100%;margin-top: 20px">
                            <tr>
                                <td style="font-weight: bold">序号</td>
                                <td style="font-weight: bold">风险内容</td>
                                <td style="font-weight: bold">危害因素</td>
                                <td style="font-weight: bold">可能导致的事故</td>
                                <td style="font-weight: bold">影响范围</td>
                                <td style="font-weight: bold">潜在后果</td>


                                <td style="font-weight: bold">风险参数</td>
                                <td style="font-weight: bold">管控措施</td>
                                <td style="font-weight: bold">隐患等级</td>
                                <td style="font-weight: bold">隐患描述</td>
                                <td style="font-weight: bold">现场照片</td>
                            </tr>
                            <tr v-for="(item,index) in executeDetails">
                                <td>{{index+1}}</td>
                                <td style="width: 200px;">{{item.title}}</td>
                                <td>{{item.reason}}</td>
                                <td>{{item.damageType}}</td>
                                <td>
                                    <template v-if="item.scope !=null">
                                        <div v-if="item.scope==0" style="text-align: center;">
                                            <div align="center">本厂</div>
                                        </div>
                                        <div v-if="item.scope==1" style="text-align: center;">
                                            <div align="center">作业场所</div>
                                        </div>
                                        <div v-if="item.scope==2" style="text-align: center;">
                                            <div align="center">设备</div>
                                        </div>
                                    </template>
                                    <template v-if="item.scope==null">
                                        无范围
                                    </template>
                                </td>
                                <td>{{item.damage}}</td>

                                <td>{{item.basis}}</td>
                                <td>{{item.controllMethod}}</td>
                                <td>
                                    <template v-if="item.processFlag !=null">
                                        <div v-if="item.errorGrade==1" style="text-align: center;">
                                            <img src="../../../imgs/onelevel.png">
                                            <div align="center">极其危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==2" style="text-align: center;">
                                            <img src="../../../imgs/twolevel.png">
                                            <div align="center">高度危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==3" style="text-align: center;">
                                            <img src="../../../imgs/threelevel.png">
                                            <div align="center">显著危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==4" style="text-align: center;">
                                            <img src="../../../imgs/fourlevel.png">
                                            <div align="center">稍有危险</div>
                                        </div>
                                    </template>
                                    <template v-if="item.processFlag==null">
                                        无隐患
                                    </template>
                                </td>

                                <td>
                                    <template v-if="item.processFlag==null">
                                        无隐患
                                    </template>
                                    <template v-if="item.processFlag!=null">
                                        {{item.errorDesc}}
                                    </template>
                                </td>
                                <td>
                                    <template v-if="item.image1">
                                        <a :href="item.image1" class="swipebox" title="ESC键退出">
                                            <el-popover
                                                    placement="right"
                                                    width="300"
                                                    trigger="hover"
                                                    popper-class="popClass">
                                                <img :src="item.image1"
                                                     style="max-width:600px;max-height: 380px "/>
                                                <img :src="item.image1" slot="reference"
                                                     style="max-width:80px;max-height: 80px "/>
                                            </el-popover>
                                        </a>
                                    </template>
                                </td>
                            </tr>
                        </table>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelDetail">确定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    $(function ($) {
        $(".swipebox").swipebox();
    })
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            todays: '',
            date: '',
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 0,

            alarmSituation: '',
            projectNo: '',
            userName: '',
            riskName: '',
            processflag: '',
            pointType: '',
            editMod: false,
            DetailData: [],
            executeDetails: [],
            patrolExecute: [],
            detailFormVisible: false,
            pointData: [{Name: '所有', Id: -1}, {Name: '风险', Id: 0}, {Name: '设备', Id: 1}],
            flagData: [{Name: '所有', Id: -1}, {Name: '已巡检', Id: 2}, {Name: '超时未巡检', Id: 3}],
            alarmData: [{Name: '所有', Id: -1}, {Name: '无隐患', Id: 0}, {Name: '有隐患', Id: 1}],
            startTime: '',
            endTime: ''
        },
        created: function () {

            this.date = TimeUtil.convertToString(new Date()).substr(0, 7);
            this.loadData();
        },
        methods: {
            exportDoc: function (Id) {
                HttpUtil.get('Executedetail/getdetailExportWord', {Id: this.patrolExecute.Id}).success((res) => {
                    this.$message.success('导出成功');
                    // window.location = SiteConfig.webApiset + res.data;
                    var newFileUrl = encodeURI(SiteConfig.webApiset + res.data, "utf-8");
                    window.location.href = newFileUrl;
                })
            },
            cancelDetail() {
                this.detailFormVisible = false;
                // this.DetailData = {};
                this.executeDetails = {};
                this.patrolExecute = {};
            },
            showDetail(rows) {
                if (rows) {
                    this.detailFormVisible = true;
                    HttpUtil.getV2('Executedetail/getdetail', {Id: rows.Id}).success((res) => {
                        // vuePage.DetailData = res.data.executeDetails;

                        for (let i in res.data.executeDetails){
                            if (res.data.executeDetails[i].image1) {
                                if (res.data.executeDetails[i].image1.indexOf('http') != -1) {
                                    res.data.executeDetails[i].image1 = res.data.executeDetails[i].image1;
                                } else {
                                    res.data.executeDetails[i].image1 = this.imageUrl + res.data.executeDetails[i].image1;
                                }
                            }
                        }

                        vuePage.executeDetails = res.data.executeDetails;
                        vuePage.patrolExecute = rows;
                        var row = res.data.executeDetails;
                        var sum = 0;
                        for (var i = 0; i < row.length; i++) {
                            if (row[i].processFlag != null) {
                                sum++;
                            }
                        }
                        vuePage.patrolExecute.patrolSum = sum;
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '未有详情！'
                    });
                }
            },
            editClick(row) {
                this.param = row;
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                let dArr = this.date.split('-');
                var param = {};
                if (this.userName)
                    param.userName = this.userName;
                if (this.riskName)
                    param.riskName = this.riskName;
                if (this.processflag != -1)
                    param.processflag = this.processflag;
                if (this.pointType != -1)
                    param.pointType = this.pointType;
                if (this.alarmSituation != -1)
                    param.alarmSituation = this.alarmSituation;
                param.year = dArr[0];
                param.month = dArr[1];
                if (this.todays)
                    param.todays = this.todays;
                // if (SiteConfig.account.projectNo)
                //     param.projectNo = SiteConfig.account.projectNo;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.getV2('Patrolexcute/getRiskStatusHistory', param).success((res) => {
                    if (res.state == 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].img) {
                                if (res.data[i].img.indexOf('http') != -1) {
                                    res.data[i].img = res.data[i].img;
                                } else {
                                    res.data[i].img = this.imageUrl + res.data[i].img;
                                }
                            }
                            if (res.data[i].img1) {
                                if (res.data[i].img1.indexOf('http') != -1) {
                                    res.data[i].img1 = res.data[i].img1;
                                } else {
                                    res.data[i].img1 = this.imageUrl + res.data[i].img1;
                                }
                            }
                            if (res.data[i].img2) {
                                if (res.data[i].img2.indexOf('http') != -1) {
                                    res.data[i].img2 = res.data[i].img2;
                                } else {
                                    res.data[i].img2 = this.imageUrl + res.data[i].img2;
                                }
                            }
                            if (res.data[i].img3) {
                                if (res.data[i].img3.indexOf('http') != -1) {
                                    res.data[i].img3 = res.data[i].img3;
                                } else {
                                    res.data[i].img3 = this.imageUrl + res.data[i].img3;
                                }
                            }
                        }
                        vuePage.tableData = res.data;
                        vuePage.totalCount = res.total;
                    }
                    else {

                        this.$message.error(res.errMsg.toString());
                    }

                });
            },
            exportData() {
                let dArr = this.date.split('-');
                var param = {};
                param.userId = SiteConfig.account.id;
                // param.projectNo = SiteConfig.account.projectNo;
                param.webApiset = SiteConfig.webApiset;
                param.processflag = '2,3,4';
                param.year = dArr[0];
                param.month = dArr[1];
                HttpUtil.get('Patrolexcute/ExportRiskCheckHistory', param).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.pageno = 1;
                this.loadData();

            },
            onCheckbox: function (row) {
            },
        },

        mounted: function () {

            this.imageUrl = SiteConfig.webApiset;
        }
    });
</script>
</body>
</html>
